import React, {FC, useCallback, useMemo, useRef, useState} from "react";
import "./css/TeamHome.less";
import GlobalSearch from "../../global/GlobalSearch.tsx";
import GlobalIcon from "../../global/GlobalIcon.tsx";
import CTable from "../../global/table/CTable.tsx";
import {useTranslation} from "react-i18next";

interface TeamHomeProps {
    search: string
    formItemLayout: number,
    viewName: string,
    tableApi: any
}

const TeamHome: FC<TeamHomeProps> = (props) => {
    const {t} = useTranslation();

    const tableRef = useRef();

    const [process, setProcess] = useState([
            {
                id: "1",
                name: "工艺规范-01",
                code: "GF-2023-001",
                rev: "01",
                projectName: "项目A"
            }, {
                id: "2",
                name: "工艺规范-02",
                code: "GF-2023-002",
                rev: "02",
                projectName: "项目B"
            },
            {
                id: "3",
                name: "工艺规范-03",
                code: "GF-2023-004",
                rev: "03",
                projectName: "项目C"
            }
        ]),
        [count, setCount] = useState({
            execute: 128,
            close: 56,
            end: 24
        });

    const onSearchTable: Function = useCallback((params: any = {}) => {
        let newParams = {...params, page: 1};
        tableRef.current?.searchTable(newParams, true);
    }, []);

    const renderTeamHomeProcess = useMemo(() => {
        return (
            <div className="sf_core_team_home_new">
                <div className="sf_core_team_home_new_title">
                    {t("currentPush")}
                </div>
                <div className="sf_core_team_home_new_tip">
                    <div className="sf_core_team_home_new_tip_spot">
                    </div>
                    <div className="sf_core_team_home_new_tip_text">
                        {t("realTimeUpdate")}
                    </div>
                </div>
                <div className="sf_core_team_home_new_box">
                    {process.map(item => {
                        return (
                            <div className="sf_core_team_home_new_box_item">
                                <p>文件名称：{item.name}</p>
                                <p>编号：{item.code}</p>
                                <p>版本：{item.rev}</p>
                                <p>项目：{item.projectName}</p>
                            </div>)
                    })}
                </div>

            </div>
        )
    }, [process]);

    const renderTeamHomeSearch = useMemo(() => {
        const {search, formItemLayout} = props;
        return (
            <div className="sf_core_team_home_search">
                <GlobalSearch
                    view={search}
                    layout="vertical"
                    formItemLayout={formItemLayout}
                    onSearch={onSearchTable}
                />
            </div>
        )
    }, [props.search, props.formItemLayout]);

    const renderTeamHomeCount = useMemo(() => {
        const {execute, close, end} = count;
        return (
            <div className="sf_core_team_home_count">
                <div className="sf_core_team_home_count_item">
                    <div className="sf_core_team_home_count_item_title">
                        {t("pendingTasks")}
                    </div>
                    <div className="sf_core_team_home_count_item_num">
                        {execute}
                        <div className="sf_core_team_home_count_item_icon">
                            <GlobalIcon size={40} name="icon-dengdaizhihangrenwushu"/>
                        </div>
                    </div>
                </div>
                <div className="sf_core_team_home_count_item">
                    <div className="sf_core_team_home_count_item_title">
                        {t("closedTasks")}
                    </div>
                    <div className="sf_core_team_home_count_item_num">
                        {close}
                        <div className="sf_core_team_home_count_item_icon">
                            <GlobalIcon size={35} name="icon-daiguanbi-weixuanzhong"/>
                        </div>
                    </div>
                </div>
                <div className="sf_core_team_home_count_item">
                    <div className="sf_core_team_home_count_item_title">
                        {t("terminatedTasks")}
                    </div>
                    <div className="sf_core_team_home_count_item_num">
                        {end}
                        <div className="sf_core_team_home_count_item_icon">
                            <GlobalIcon size={95} name="icon-yichangzhongzhi"/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }, [count]);


    const renderTeamHomeTable = useMemo(() => {
        const {viewName, tableApi} = props;
        return (
            <div className="sf_core_team_home_table">
                <div className="sf_core_team_home_table_title">
                    任务列表
                </div>
                <div className="sf_core_team_home_table_box">
                    <CTable
                        init={tableRef}
                        key="teamHomeTable"
                        view={viewName}
                        headerHeight={40}
                        height="100%"
                        tableApi={tableApi}
                        rowKey="id"
                        isLazyData={true}
                        isShowHeader={false}
                    />
                </div>
            </div>
        )
    }, [props]);

    const renderTeamHome = useMemo(() => {
        return (
            <div className="sf_core_team_home">
                {renderTeamHomeProcess}
                {renderTeamHomeSearch}
                {renderTeamHomeCount}
                {renderTeamHomeTable}
            </div>
        )
    }, [props, process, count]);

    return (renderTeamHome);
};

export default React.memo(TeamHome);